import React, { PureComponent } from 'react';
import { Chart, Geom, Axis, Tooltip, Legend, Label } from 'bizcharts';
import DataSet from '@antv/data-set';
import numeral from 'numeral';
import style from './index.less';

class AppSmsDashboard extends PureComponent {
  numeralCount = count => numeral(count).format('0,0.00');

  wanCount = count => {
    let data;
    if (count < 10000) {
      data = count;
    } else {
      data = this.numeralCount(count / 10000);
      data = `${data} 万`;
    }
    return data;
  };

  render() {
    const { appSmsLoginList, showDate } = this.props;
    // 遍历取数
    const names = appSmsLoginList.map(value => value.appName);
    const smsSendSuccessCounts = appSmsLoginList.map(value => value.smsSendSuccessCount);
    const smsSendSuccessUserCounts = appSmsLoginList.map(value => value.smsSendSuccessUserCount);
    const smsLoginSuccessCounts = appSmsLoginList.map(value => value.smsLoginSuccessCount);
    const smsLoginUserCounts = appSmsLoginList.map(value => value.smsLoginUserCount);
    const loginSuccessCountObj = {};
    const loginUserCountObj = {};
    const sendSuccessCountsObj = {};
    const sendUserCountObj = {};
    names.forEach((value, index) => {
      sendSuccessCountsObj[value] = smsSendSuccessCounts[index];
      loginSuccessCountObj[value] = smsLoginSuccessCounts[index];
      sendUserCountObj[value] = smsSendSuccessUserCounts[index];
      loginUserCountObj[value] = smsLoginUserCounts[index];
    });

    // 构造BizChart结构
    const ds = new DataSet();
    const appSmsCountData = [
      {
        name: '短信发送成功次数',
        ...sendSuccessCountsObj,
      },
      {
        name: '用户登录次数',
        ...loginSuccessCountObj,
      },
    ];
    const appSmsCountDataDv = ds.createView().source(appSmsCountData);
    appSmsCountDataDv.transform({
      type: 'fold',
      fields: Object.keys(sendSuccessCountsObj),
      // 展开字段集
      key: '应用',
      // key字段
      value: '数量', // value字段
    });

    const appSmsUserCountData = [
      {
        name: '短信发送用户数',
        ...sendUserCountObj,
      },
      {
        name: '登录用户数',
        ...loginUserCountObj,
      },
    ];
    const appSmsUserCountDataDv = ds.createView().source(appSmsUserCountData);
    appSmsUserCountDataDv.transform({
      type: 'fold',
      fields: Object.keys(sendUserCountObj),
      // 展开字段集
      key: '应用',
      value: '人数',
    });

    const background = {
      fill: '#FFFFFF', // 图表背景色-白色
      fillOpacity: 0, // 图表背景透明度
    };

    return appSmsLoginList.length > 0 ? (
      <div style={{ height: 385 }}>
        <div style={{ padding: '20px', background: '#FFFFFF', width: '49.5%', float: 'left' }}>
          <Chart height={300} data={appSmsCountDataDv} forceFit background={background}>
            <span className={style.mainTitle}>日短信发送成功次数、登录成功次数(次)</span>
            <span className={style.remark}>{showDate}</span>
            <Axis name="应用" />
            <Axis name="数量" />
            <Legend />
            <Tooltip
              crosshairs={{
                type: 'y',
              }}
            />
            <Geom
              type="interval"
              position="应用*数量"
              color="name"
              adjust={[
                {
                  type: 'dodge',
                  marginRatio: 1 / 32,
                },
              ]}
            >
              <Label
                content={['应用*数量', (x, y) => this.wanCount(`${y}`)]}
                textStyle={{
                  textAlign: 'center', // 文本对齐方向，可取值为： start middle end
                  fill: '#404040', // 文本的颜色
                  fontSize: '12', // 文本大小
                  fontWeight: 'normal', // 文本粗细：normal/bold
                  rotate: 0, // 文字旋转
                  textBaseline: 'top', // 文本基准线，可取 top middle bottom，默认为middle
                }}
              />
            </Geom>
          </Chart>
        </div>

        <div style={{ padding: '20px', background: '#FFFFFF', width: '49.5%', float: 'right' }}>
          <Chart height={300} data={appSmsUserCountDataDv} forceFit background={background}>
            <span className={style.mainTitle}>日短信发送用户数、登录用户数(人)</span>
            <span className={style.remark}>{showDate}</span>
            <Axis name="应用" />
            <Axis name="人数" />
            <Legend />
            <Tooltip
              crosshairs={{
                type: 'y',
              }}
            />
            <Geom
              type="interval"
              position="应用*人数"
              color="name"
              adjust={[
                {
                  type: 'dodge',
                  marginRatio: 1 / 32,
                },
              ]}
            >
              <Label
                content={['应用*人数', (x, y) => this.wanCount(`${y}`)]}
                textStyle={{
                  textAlign: 'center', // 文本对齐方向，可取值为： start middle end
                  fill: '#404040', // 文本的颜色
                  fontSize: '12', // 文本大小
                  fontWeight: 'normal', // 文本粗细
                  rotate: 0, // 文字旋转
                  textBaseline: 'top', // 文本基准线，可取 top middle bottom，默认为middle
                }}
              />
            </Geom>
          </Chart>
        </div>
      </div>
    ) : (
      <div style={{ height: 80 }}>
        <div
          style={{
            padding: '20px',
            background: '#FFFFFF',
            width: '49.5%',
            float: 'left',
            textAlign: 'center',
          }}
        >
          日短信发送成功次数、登录成功次数暂无数据
        </div>
        <div
          style={{
            padding: '20px',
            background: '#FFFFFF',
            width: '49.5%',
            float: 'right',
            textAlign: 'center',
          }}
        >
          日短信发送用户数、登录用户数暂无数据
        </div>
      </div>
    );
  }
}

export default AppSmsDashboard;
